﻿.menu-container{

    width: 100%;
    margin: 0 auto;
    background:#263238;
    position:fixed;
    top: 59px;
    z-index: 10;

    .menu-mobile {
        display: none;
        padding: 20px;

        &:after {
            content: "\f313";
            font-family: "Material-Design-Iconic-Font";
            font-size: 2.5rem;
            @extend .padding-0;
            float: right;
            position: relative;
            top: 50%;
            -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
        }
    }

    .h-menu {
        margin: 0 auto;
        width: 100%;
        list-style: none;
        @extend .padding-0;
        position: relative;
        
        // overflow-y: scroll;
        scrollbar-width: none; // Firefox /
        -ms-overflow-style: none;  // IE 10+ /
        
        &::-webkit-scrollbar { // WebKit
            width: 0px;
        }

        &:after,
        &:before {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }

        .open.active{
            transform: none;
            > a{
                color: $white;
                opacity: 1;
            }
            .active{
                a{
                    font-weight: 700;
                }
            }
        }

        > li {
            float: left;
            @extend .padding-0;
            @extend .margin-0;

            a {
                text-decoration: none;
                padding:12px 15px;
                @extend .displayblock;
                color:#bbb;                 

                &:hover {
                    color: $white;
                }
            }

            &:last-child{
                position: relative;

                .sub-menu{
                    left: auto;
                    right: 0;
                }
            }

            .sub-menu{
                min-width: 250px;
                display: none;                    
                background: $white;
                padding: 10px;
                position: absolute;
                z-index: 99;
                left: auto;                
                list-style: none;                    
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                border-radius: $border-radius-large;

                &.mega-menu{
                    width: 100%;
                    left: 0;

                    > li {
                        width:24.5%;
                        @extend .inlineblock;
                        vertical-align: top;
                    }
                }

                &.sm-mega-menu{
                    width:400px;
                    left: auto;

                    > li{
                        @extend .inlineblock;
                        width: 49.33%;
                    }

                    ul{
                        @extend .padding-0;
                        list-style: none;
                    }
                }

                > li {

                    a{
                        color: $grey-600;
                        position: relative;
                        @extend .p-l-40;
                        font-size: 14px;

                        &:before{
                            content: "\f301";
                            font-family: "Material-Design-Iconic-Font";
                            position: absolute;
                            left: 15px;
                            top: 12px;
                            transition: .5s;
                        }

                        &:hover{
                            color: $grey-900;

                            &:before{
                                left: 20px;
                            }
                        }

                    }

                    span {
                        color: $grey-600;
                        padding: 15px;
                        width: 95%;
                        @extend .displayblock;
                        border-bottom: 1px solid $grey-400;
                    }
                }

                .sub-menu-two {
                    @extend .displayblock;
                    @extend .padding-0;                    
                    list-style: none;                    
                }
            }
        }
    }    
}

@media only screen and (max-width: 959px) {
    .h-bars:before {
        content: '\E5D2';
        font-family: 'Material Icons';
        color: #000;
        line-height: 44px;
        font-size: 24px;
        position: absolute;
        top: 8px;
        left: 12px;
        margin-right: 10px;
    }

    .menu-mobile {
        display: block;
    }
      
    .menu-container{
        .h-menu{
            display: none;

            &.show-on-mobile {
                display: block;    
                overflow-y: scroll;
                height: calc(100vh - 70px);
                margin-top: 10px;
            }

            >li{
                width: 100%;
                float: none;
                display: block;
                position: relative;

                a{
                    padding: 13px 20px;
                    width: 100%;
                    display: block;
                }
                .sub-menu{
                    position: relative;
                    &.mega-menu>li{
                        width: 100%;
                    }
                }
            }
        }
    }
}